<script setup lang="ts">
import { ref } from 'vue'

import type { ContactInfo } from '@/types/my.d'
import { loadContactInfoUsingGet } from '@/services/my'
import { onLoad } from '@dcloudio/uni-app'

const contactInfo = ref<ContactInfo>()

// 获取联系我们信息
const fetchContactInfo = async () => {
  const res = await loadContactInfoUsingGet()
  contactInfo.value = res.data[0]
}
// 拨打电话
const onTapPhoneNumber = () => {
  uni.makePhoneCall({
    phoneNumber: contactInfo.value?.phone || '',
    success: () => {
      console.log('电话拨打成功')
    },
    fail: (err) => {
      if (err.errMsg.includes('cancel')) {
        console.log('用户取消拨打电话')
      } else {
        console.error('拨打电话失败', err)
      }
    },
  })
}
// 复制邮箱到剪贴板
const copyEmail = () => {
  // 确保 email 存在
  const email = contactInfo.value?.email
  if (email) {
    uni.setClipboardData({
      data: email, // 确保 data 是一个字符串
      success: () => {
        uni.showToast({
          title: '邮箱已复制',
          icon: 'success',
        })
      },
      fail: (err) => {
        uni.showToast({
          title: '复制失败',
          icon: 'none',
        })
      },
    })
  }
}

onLoad(() => {
  fetchContactInfo()
})
</script>
<template>
  <view class="contact-container">
    <view class="content">
      <view v-if="contactInfo?.email" class="field">
        <text class="label">邮箱：</text>
        <text class="value" @tap="copyEmail">{{ contactInfo?.email }}</text>
      </view>
      <view v-if="contactInfo?.phone" class="field">
        <text class="label">电话：</text>
        <text class="value" @tap="onTapPhoneNumber">{{ contactInfo?.phone }}</text>
      </view>
      <view v-if="contactInfo?.address" class="field">
        <text class="label">地址：</text>
        <text class="value">{{ contactInfo?.address }}</text>
      </view>
      <view v-if="contactInfo?.wxappName && contactInfo?.wxappLink" class="field">
        <text class="label">社交媒体：</text>
        <!--        <web-view :src="contactInfo?.wxappLink" class="value"></web-view>-->
      </view>
      <view v-if="contactInfo?.remark" class="field">
        <text class="label">备注：</text>
        <text class="value">{{ contactInfo?.remark }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
.contact-container {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.content {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin: 20rpx;
  box-sizing: border-box;
}

.field {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
  text-align: left;
  flex-shrink: 0;
}

.value {
  font-size: 32rpx;
  color: #333;
  flex: 1;
  text-align: right;
  word-wrap: break-word;
  padding-left: 20rpx;
}

.field:last-child {
  border-bottom: none;
}

/* 删除media query，因为rpx会自动适配不同屏幕 */
</style>
